<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>潍坊市各区房源数据</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="city_map" style="height: 100%"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["潍城区", 10000, 3500],
            ["寒亭区", 9000, 3200],
            ["坊子区", 8500, 3000],
            ["奎文区", 11000, 4000],
            ["青州市", 9500, 3300],
            ["诸城市", 10500, 3800],
            ["寿光市", 12000, 4200],
            ["安丘市", 8000, 2800],
            ["高密市", 9000, 3400],
            ["昌邑市", 8500, 3100],
            ["临朐县", 7000, 2500],
            ["昌乐县", 7500, 2700]
];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370700_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '青岛市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                       '房源数量: ' + totalValue + '<br/>' +
                                       '均价: ' + avgPrice + '元/平方米';
                            },
                          textStyle: {
                                fontSize: 8 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 5
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化潍坊市地图
        var parsedData = parseData(jsonData);
        initJinanMap(parsedData);
    </script>
</body>
</html>
